<script setup>

import {onBeforeMount, ref} from "vue";
import {delObjectById, getPage, getSum, selectByTypeAndDate} from "@/api/api";
import {role_filter} from "@/stores/travller";

onBeforeMount(() => {

  role_filter("admin")

  getSum("result").then(res => {
    console.log(res.data)
    sum.value = res.data.data
  })
  getPage(1, "result").then((res) => {
    console.log(res);
    data.value = res.data.data
  })

})

const sum = ref(0)

const data = ref([]);

const current = ref(1)

const roleIndex = ["", "横向课题", "纵向课题", "论文"]

const visible = ref(true)

const valueOfType = ref("0")

const numOfYear = ref(0)

const getData = (pageNum) => {
  getPage(pageNum, "result").then((res) => {
    console.log(res.data.data);
    data.value = res.data.data
  })
}

const del = (id) => {
  delObjectById(id, "result").then((res) => {
    console.log(res)
    getData(current.value)
  })
}

const selectByYearAndType = () => {
  if(numOfYear.value === 0 && valueOfType.value === "0"){
    getData(current.value)
    visible.value = true
  }else{
    console.log(valueOfType.value + " " + numOfYear.value)
    selectByTypeAndDate(valueOfType.value, numOfYear.value, "result").then((res) => {
      console.log(res.data)
      data.value = res.data.data
      visible.value = false
    })
  }
}

const columns = [
  {
    title: 'Id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: 'Rno',
    dataIndex: 'rno',
    key: 'rno',
  },
  {
    title: 'Type',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: 'MasterId',
    dataIndex: 'master',
    key: 'master',
  },
  {
    title: 'Create_time',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: 'Available',
    dataIndex: 'available',
    key: 'available',
  },
  {
    title: 'Action',
    key: 'action',
  }
];


</script>

<template>
  <body>
  <div>
    <h1>科研成果信息管理</h1>
    <div style="text-align: left; display: flex;">
<!--      <a-input>-->
<!--        年份-->
<!--      </a-input>-->
      <div style="margin-left: 1rem">
        <a-select
            ref="select"
            v-model:value="valueOfType"
            style="width: 120px"
            @focus="focus"
            @change="selectByYearAndType"
        >
          <a-select-option value="1">横向课题</a-select-option>
          <a-select-option value="2">纵向课题</a-select-option>
          <a-select-option value="3">论文</a-select-option>
          <a-select-option value="0">ALL</a-select-option>
        </a-select>
      </div>
      <div style="margin-left: 1rem">
        <a-space>
          <a-input-number v-model:value="numOfYear" @focusout="selectByYearAndType"/>
        </a-space>
      </div>
    </div>
    <a-table class="table" :pagination="!visible" :columns="columns" :data-source="data">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'available'">
          <a>
            {{ record.available }}
          </a>
        </template>
        <template v-else-if="column.key === 'type'">
          <a>
            {{ roleIndex[record.type] }}
          </a>
        </template>
        <template v-else-if="column.key === 'action'">
        <span>
          <a @click="del(record.id)">Delete</a>
        </span>
        </template>
      </template>
    </a-table>
    <a-pagination v-if="visible" v-model:current="current" :total="sum * 10" show-less-items
                  @change="getData(current)"/>
  </div>
  </body>
</template>

<style scoped>
.table {
  color: #5C7BD9;
}
</style>